<template>
   <view class="uv-page">
      <uv-cell-group>
         <uv-cell
            :titleStyle="{ fontWeight: 500 }"
            @click="openKeyboard(index)"
            :title="item.title"
            v-for="(item, index) in list"
            :key="index"
            isLink
         >
            <template v-slot:icon>
               <image class="uv-cell-icon" :src="item.iconUrl" mode="widthFix"></image>
            </template>
         </uv-cell>
      </uv-cell-group>
      <uv-keyboard
         ref="keyboardRef"
         :mode="keyData.mode"
         :dotDisabled="keyData.dotDisabled"
         :random="keyData.random"
         @close="close"
         @cancel="cancel"
         @confirm="confirm"
         @change="change"
         @backspace="backspace"
      ></uv-keyboard>
      <uv-keyboard
         ref="keyboardRefCar"
         mode="car"
         customabc
         :disKeys="['京', 2, 'Q', 'X']"
         @change="change"
         @confirm="confirm"
         @changeCarInputMode="changeCarInputMode"
      >
         <template v-slot:abc>
            <text v-if="isABC">省份</text>
            <text v-else>ABC</text>
         </template>
      </uv-keyboard>
   </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const keyboardRef = ref();
const keyboardRefCar = ref();

const input = ref('');
const isABC = ref(false);
const keyData = ref({
   mode: '',
   dotDisabled: false,
   random: false,
});
const list = ref([
   {
      title: '车牌号键盘',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png',
   },
   {
      title: '车牌号键盘切换键自定义+禁用按键',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/car.png',
   },
   {
      title: '数字键盘',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/number.png',
   },
   {
      title: '身份证键盘',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/IdCard.png',
   },
   {
      title: '隐藏键盘"."符号',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/dot.png',
   },
   {
      title: '打乱键盘按键的顺序',
      iconUrl: 'https://cdn.uviewui.com/uview/demo/keyboard/order.png',
   },
]);

const navigateBack = () => {
   uni.navigateBack();
};
// 点击展示不同的键盘
const openKeyboard = index => {
   keyData.value = {
      mode: '',
      dotDisabled: false,
      random: false,
   };
   switch (index) {
      case 0:
         keyData.value.mode = '';
         break;
      case 1:
         return keyboardRefCar.value.open();
      case 2:
         keyData.value.mode = 'number';
         break;
      case 3:
         keyData.value.mode = 'card';
         break;
      case 4:
         keyData.value.mode = 'number';
         keyData.value.dotDisabled = true;
         break;
      case 5:
         keyData.value.mode = 'number';
         keyData.value.random = true;
         break;
   }
   input.value = '';
   keyboardRef.value.open();
};
const change = (e: any) => {
   console.log('change', e);
   input.value += e;
};
const close = () => {
   console.log('键盘关闭');
};
const cancel = () => {
   console.log('cancel');
};
const confirm = () => {
   console.log('confirm');
};
const backspace = () => {
   input.value = input.value.slice(0, -1);
};
const changeCarInputMode = (e: any) => {
   isABC.value = e;
};
</script>

<style lang="scss" scoped>
.uv-page {
   padding: 0;
}
</style>
